<!-- 项目查询 -->
<template lang="html">
  <div class="projectQuery">
    <!-- 项目查询 -->
    <Card :bordered="false">
      <p slot="title">项目查询</p>
      <p>
        <Row>
          <Col span="2">
            <p class="title-p">报告类型</p>
          </Col>
          <Col span="12" >
            <RadioGroup v-model="queryReportType" type="button" @on-change="changeQueryReportType">
              <Radio label="全部"></Radio>
              <Radio label="报告表"></Radio>
              <Radio label="报告书"></Radio>
              <Radio label="现状评估报告"></Radio>
              <Radio label="规划"></Radio>
              <Radio label="验收"></Radio>
            </RadioGroup>
          </Col>
        </Row>

        <Row>
          <Col span="2">
            <p class="title-p">选择时间</p>
          </Col>
          <Col span="12">
            <RadioGroup v-model="queryTime" type="button" @on-change="changeQueryTime">
              <Radio label="不限"></Radio>
              <Radio label="近一周"></Radio>
              <Radio label="近一个月"></Radio>
              <Radio label="近半年"></Radio>
              <Radio label="近一年"></Radio>
            </RadioGroup>
          </Col>
        </Row>

        <Row style="padding-bottom:10px;">
          <Col span="2">
            <p class="title-p">选择地区</p>
          </Col>
          <Col span="22">
            <Row>
              <Col span="2">
                <Select clearable v-model="queryMProvince" style="width:100%" placeholder="省份" @on-change="changeQueryMProvince">
                    <Option v-for="item in cityList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
              </Col>
              <Col span="2" offset="1">
                <Select clearable v-model="queryMCity" style="width:100%" placeholder="城市" @on-change="changeQueryMcity">
                    <Option v-for="item in cities" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
              </Col>
              <Col span="6" offset="13">
                <Input search enter-button placeholder="请输入关健词" @on-search='querySearch' v-model="querySearchText"/>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row>
          <Col>
            <Table border :loading="queryLoading" :columns="queryColumns" :data="queryData" @on-sort-change="sortChangeOrder" :height='showHeight'></Table>
            <div v-if="hidePage" style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                <Page
                  :total="queryPageTotal"
                  :current.sync="queryPageNum"
                  :page-size="queryPageSize"
                  show-total
                  show-elevator
                  show-sizer
                  @on-change="getQueryProject"
                  @on-page-size-change='queryPageChangeSize'>
                </Page>
              </div>
            </div>
          </Col>
        </Row>
      </p>
    </Card>

    <!-- 已完成 -->
    <Card v-if="hideCompleted" :bordered="false" style="margin-top:20px;">
      <p slot="title">已完成项目</p>
      <p>
        <Row style="margin-bottom:20px;">
          <Col span="24">
            <Row>
              <Col span="24">
                <Row>
                  <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">总计</Col>
                  <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">{{numMap.bgsNum}}个报告书{{numMap.bgbNum}}个报告表</Col>
                  <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">绩效{{numMap.jxNum}}</Col>
                </Row>
              </Col>
            </Row>
              <Row>
                  <Col span="2" style="height:36px;line-height:36px;">
                    <p class="title-p">日期范围</p>
                  </Col>
                  <Col span="4">
                    <DatePicker type="date" v-model="StartTime" placeholder="开始时间" size="large"></DatePicker>
                  </Col>
                  <Col span="1" style="text-align:center;">
                    <span >—</span>
                  </Col>
                  <Col span="5">
                    <DatePicker type="date" v-model="EndTime" placeholder="结束时间" size="large"></DatePicker>
                  </Col>
                    <Col span="2" >
                        <Button type="primary" @click="getCompleteProject">查询</Button>
                    </Col>
              </Row>
          </Col>
        </Row>
        <Row>
          <Col>
            <Table border :loading="completeLoading" @on-row-click="lookUp" :columns="completeColumns" :data="completeData" :height='showHeight'></Table>
            <div style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                <Page
                  :total="completePageTotal"
                  :current.sync="completePageNum"
                  :page-size="completePageSize"
                  show-total
                  show-elevator
                  show-sizer
                  @on-change="getCompleteProject"
                  @on-page-size-change='completePageChangeSize'>
                </Page>
              </div>
            </div>
          </Col>
        </Row>
      </p>
    </Card>
    <Modal @on-ok='ok' @on-cancel='cancel' v-model="projectFlow" width="700" title="项目流程单" :mask-closable="false" :styles="{top: '20px',width: '700px',height:'90%',overflowY:'scroll'}">
      <rojectProcedures v-if="projectFlow" :routerId='routerId' :titleShow='false'></rojectProcedures>
    </Modal>
  </div>
</template>

<script>
import cityList from "../../libs/city.js"
import rojectProcedures from './rojectProcedures'
export default {
  props: {
    hidePage: {
      default: true,
    },
    hideCompleted: {
      default: true,
    },
    PageSize: {
      default: ''
    },
    showHeight: {
      default:600
    }
  },
  data() {
    return {
        numMap:{},
        StartTime:'',
        EndTime:'',
      querySearchText: '',
      //项目查询
      queryPageTotal: 0,
      queryPageNum: 1,
      queryPageSize: 10,
      queryColumns: [
        { align: "center", title: "项目名称", key: "ProjectName" },
        { align: "center", title: "建设单位", key: "BuildUnit", },
        { align: "center", title: "报告类型", key: "ReportType",  sortable: 'custom' },
        { align: "center", title: "地区", key: "BuildAddress",  sortable: 'custom' },
        { align: "center", title: "创建日期", key: "PerjectTime", },
      ],
      queryData: [],
      queryLoading: true,
      // projectFlow: false,
      queryReportType: '全部',
      queryReportType_number: 0,
      queryTime: '不限',
      queryTime_number: 0,
      queryMProvince: null,
      queryMCity: null,
      routerId: '',
      //已完成
      completePageTotal: 0,
      completePageNum: 1,
      completePageSize: 10,
      completeColumns: [
        { type: "index", align: "center", title: "序号", key: "num" },
        { align: "center", title: "项目名称", key: "ProjectName" },
        { align: "center", title: "报告类型", key: "ReportType" },
        { align: "center", title: "地区", key: "BuildAddress" },
        { align: "center", title: "审批部门", key: "ApprovalUnit" },
        { align: "center", title: "绩效", key: "ContractAmount" },
      ],
      completeData: [],
      completeLoading: true,

      cityList,
      cities: [],
      key:'',
      order:''
    }
  },
  computed: {
    // 模态框状态
    projectFlow: {
      get: function() {
        return this.$store.state.modalState
      },
      set: function(newValue) {
        this.$store.state.modalState = newValue
      }  
    }
  },
  mounted() {
    // 考虑首页情况，如果传入就改变，未传入按原来走
    if(this.PageSize) {
       this.queryPageSize = this.PageSize
    }
    this.getQueryProject(1)
    this.getCompleteProject(1)
  },
  methods: {
     sortChangeOrder(data){
     this.key = data.key
     this.queryPageNum=1;
     this.order = data.order
     this.getQueryProject(1)
     },
    //查看已完成项目流程单
    lookUp(data){
      this.routerId = data.Id
      // this.projectFlow = true
      this.$store.commit('setModalState',true)
      this.$store.state.inProject = 2
    },
    ok () {
      this.$store.commit('setModalState',false)
    },
    cancel () {
      this.$store.commit('setModalState',false)
    },
    changeQueryReportType(value) {
      let number = 0
      switch (value) {
        case '全部': number = 0; this.queryPageNum=1; break;
        case '报告表': number = 1; this.queryPageNum=1; break;
        case '报告书': number = 2; this.queryPageNum=1; break;
        case '现状评估报告': number = 3; this.queryPageNum=1; break;
        case '规划': number = 4; this.queryPageNum=1; break;
        case '验收': number = 5; this.queryPageNum=1; break;
        default: number = 0;
      }
      this.queryReportType_number = number
      this.getQueryProject(1)
    },
    changeQueryTime(value) {
      let number = 0
      switch (value) {
        case '不限': number = 0; this.queryPageNum=1; break;
        case '近一周': number = 1; this.queryPageNum=1; break;
        case '近一个月': number = 2; this.queryPageNum=1; break;
        case '近半年': number = 3; this.queryPageNum=1; break;
        case '近一年': number = 4; this.queryPageNum=1; break;
        default: number = 0;
      }
      this.queryTime_number = number
      this.getQueryProject(1)
    },
    getQueryProject(page) {
      this.queryLoading = true

      let PageIndex = page - 1,
          PageSize = this.queryPageSize,
          Time = this.queryTime_number,
          ReportType = this.queryReportType_number,
          MProvince = this.queryMProvince,
          MCity = this.queryMCity,
          ProjectName = this.querySearchText,
          Key = this.key,
          Order = this.order
      this.$post('ProjectInfo.findAllProject', {
          PageIndex,
          Time,
          ReportType,
          MProvince,
          MCity,
          ProjectName,
          PageSize: PageSize, //要考虑首页传入页码大小情况
          Key,
          Order
      }).then((res)=>{
        if(res._STATUS == 1) {
          if(res.projectList&&res.projectList.length>0) {
            this.queryData = res.projectList
            this.queryPageTotal = res.countProjectList
            this.queryLoading = false
          }else {
            this.queryData = []
            this.queryPageTotal = res.countProjectList
            this.queryLoading = false
          } 
        }
      })
    },
    getCompleteProject(page) {
      this.completeLoading = true
      let PageIndex = page - 1;
      this.$post('ProjectInfo.findAllEntProject',{
          PageIndex:PageIndex,
          PageSize: this.completePageSize,
          StartTime:this.StartTime,
          EndTime:this.EndTime,
      }).then((res)=>{
        console.log(res)
        this.completeData = res.projectList
        this.completePageTotal = res.countProjectList
        this.numMap = res.numMap;
        this.completeLoading = false
      })
    },

    querySearch(value) {
      this.querySearchText = value
      this.getQueryProject(1)
    },

    changeQueryMProvince(province){
      let cityList = this.cityList
      for (let i in cityList) {
        let info = cityList[i]
        if (province == info.name) {
          this.cities = info.cityList
        }
      }
      this.queryMProvince = province
      this.getQueryProject(1)
      this.changeQueryMcity()   //去掉.empty
    },

    changeQueryMcity(city) {
      this.queryMCity = city
      this.getQueryProject(1)
    },

    queryPageChangeSize(size) {
      this.queryPageSize = size
      this.getQueryProject(1)
    },
    completePageChangeSize(size) {
      this.completePageSize = size
      this.getCompleteProject(1)
    },
  },
  components: {
    rojectProcedures,
  },
}
</script>

<style lang="less" scoped>
    .ivu-row{
        margin-bottom: 10px;
    }
</style>
